<template>
    <div class="signup pos-re"
        :class="bgs[sj]">
        <div class="l oneline">
            <h2 class="title clr0"
                v-text="Lang.title[lang]" />
            <ul class="selectbox">
                <li class="selects ilbk cur animation"
                    :class="{active: signType === 'phone'}"
                    @click="e_type('phone')"
                    v-text="Lang.typeChoose[lang][0]" />
                <li class="selects ilbk cur animation" 
                    :class="{active: signType === 'email'}"
                    @click="e_type('email')"
                    v-text="Lang.typeChoose[lang][1]"
                />
            </ul>
            <c-form class="signupform"
                :itype="signType" />
        </div>
        <div class="r oneline">
            <ul class="signuptxtbox flex">
                <li class="infors"
                    v-text="Lang.talk[lang][0]" />
                <li class="infors"
                    v-text="Lang.talk[lang][1]" />
                <li class="infors"
                    v-text="Lang.talk[lang][2]" />
                <li class="infors"
                    v-text="Lang.talk[lang][3]" />
            </ul>
        </div>
        <!-- <q1-starLine class="canvas pos-ab w1 h1"/> -->
    </div>
</template>

<script>
import Lang from './lang'
import {vpost, vlink} from '@api'
import Cform from './form'
export default {
	name: 'signup',
	data() {
		return {
			Lang,
			bgs: {
				white: 'hbsj-bgwhite',
				black: 'hbsj-bgblack',
			},
			form: {
				user: null,
				password: null,
			},
			checkRe: {
				user: false,
				password: false,
			},
			signType: 'phone',
		}
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
		sj() {
			return this.$store.state.setting.subject
		},
	},
	components: {
		'c-form': Cform,
	},
	created() {},
	methods: {
		e_ipt(re, inputed, back) {
			this.checkRe[back] = re
			this.form[back] = inputed
		},
		e_type(w) {
			this.signType = w
		},
	},
}
</script>

<style scoped>
.signup {
	white-space: nowrap;
	text-align: center;
}
.l {
	--commclr: rgb(205, 210, 214);
	margin: 150px 0 0 0;
	width: 520px;
	text-align: left;
}
.title {
	margin: 0;
	font-size: 36px;
	font-weight: 400;
}
.selects {
	border-bottom: 2px solid transparent;
	margin-right: 40px;
	line-height: 40px;
	font-size: 16px;
	color: var(--clr0);
}
.active {
	border-color: var(--clr1);
	color: var(--clr1);
}

.r {
	margin-left: 40px;
	text-align: left;
}
.signuptxtbox {
	margin: 280px 0 0 0;
	flex-direction: column;
	color: #61688a;
}
.infors {
	display: inline-block;
	margin: 10px 0;
	width: 500px;
	word-break: break-all;
	white-space: normal;
}
</style>